<script setup>
import { ref, onMounted, reactive, watchEffect } from 'vue'
import { getDataStatistics } from '@/api/book/index.js'
import { getPaginationConfig } from '@/components/pagination.js'
let dataSource = ref([])
// 分页参数配置
const paginationConfig = ref(getPaginationConfig())
const date = ref(1)

// 获取审核作者列表数据
const loadData = (params) => {
  dataState.loading = true
  getDataStatistics(params)
  .then(res => {
    dataSource.value = res.records || []
    paginationConfig.value.total = res.total
    dataState.loading = false
  })
  .finally(() => {
    dataState.loading = false
  })
}
const dataState = reactive({
  params: {
    pageNum: 1,
    pageSize: 10,
    scope: 1
  },
  loading: false,
})
onMounted(() => {
  loadData(dataState.params)
})
const setDate = e => {
  dataState.params.scope = e.target.value
  loadData(dataState.params)
}
const columns = [
  {
    title: '小说名称',
    dataIndex: 'novelTitle'
  },
  {
    title: '浏览量',
    dataIndex: 'readNums',
    align: 'center'
  },
  {
    title: '评论数',
    dataIndex: 'commentNums',
    align: 'center',
  },
  {
    title: '更新字数',
    dataIndex: 'updateWordNums',
    align: 'center',
  },
  {
    title: '订阅数',
    dataIndex: 'subscribeNum',
    slots: {
      customRender: 'subType',
    }
  },
  {
    title: '更新章节数',
    dataIndex: 'updateChapterNums',
    align: 'center'
  }
]

// 监听Table
const handleTableChange = ({ current }) => {
  dataState.params.pageNum = current
  paginationConfig.value.current = current
  loadData(dataState.params)
}

</script>
<template>
  <div class="wrappers">
      <a-radio-group v-model:value="date" button-style="solid" @change="setDate">
        <a-radio-button :value="1">昨天</a-radio-button>
        <a-radio-button :value="2">今天</a-radio-button>
        <a-radio-button :value="3">本月</a-radio-button>
      </a-radio-group>
  </div>
  <a-table 
    :dataSource="dataSource"  
    :columns="columns" 
    :loading="dataState.loading"
    :rowKey="record => record?.novelId" 
    :pagination="paginationConfig"
    @change="handleTableChange"
  >
    <template #subType="{ record }">
        <a-tag  v-if="record.subscribeNum > 0" color="success">{{ record.subscribeNum }}</a-tag>
        <a-tag  v-else color="processing">{{ record.subscribeNum }}</a-tag>
    </template>
  </a-table>
</template>
<style lang="less">
.wrappers {
  margin-bottom: 20px;
}
</style>